<template>
  <div>
    <el-form
      v-if="detailData?.name"
      ref="ruleFormRef"
      :model="detailData"
      label-position="left"
      label-width="120px"
      class="form_box"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目名称：">
            {{ detailData.name }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="制作方名称：">
            {{ detailData.producer }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="总集数：">
            {{ `${detailData.updateEpisodeNo}/${detailData.episodeNum}` }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目状态：">
            <el-tag v-if="detailData.status === 1">未上映</el-tag>
            <el-tag v-else-if="detailData.status === 2" type="warning">
              更新中
            </el-tag>
            <el-tag v-else-if="detailData.status === 3" type="success">
              已完结
            </el-tag>
            <el-tag v-else type="danger">未知状态</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="发行年份：" prop="releaseYear ">
            {{ detailData.releaseYear }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目海报：" prop="cover">
            <ElImage
              :src="coverImg"
              :zoom-rate="1.2"
              :preview-src-list="[coverImg]"
              :initial-index="1"
              style="width: 90px; border-radius: 4px"
              fit="contain"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目资质：">
            <span v-if="detailData.recordType === 1">网络剧片发行许可证</span>
            <span v-if="detailData.recordType === 2">剧目备案号</span>
            <span v-if="detailData.recordType === 3">普通备案号</span>
            <span v-if="detailData.recordType === 4">重点备案号</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="备案信息：">
            {{ detailData.recordInfo }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目授权材料：">
            <el-image
              v-if="imageURL"
              :src="imageURL"
              :zoom-rate="1.2"
              :preview-src-list="[imageURL]"
              :initial-index="1"
              style="width: 100px"
              fit="contain"
            />
            <span class="grey" v-else>未上传</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { getOperasLicense } from "@/api/operateCenter/episode/index";
import { cloneDeep } from "lodash-es";
import { useRoute } from "vue-router";
import { ElImage } from "element-plus";

const props = defineProps({
  detailData: <any>Object,
});
const { detailData } = toRefs(props); // 剧目详情信息

const route = useRoute();
const id = ref(Number(route.query.id) || 0);
const imageURL = ref<string>("");
const randN = Math.floor(Math.random() * 100000); // 生成随机数，保证每个图片不走浏览器缓存
const coverImg = computed(() => {
  return `https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/cover/${detailData.value?.cover}?${randN}`;
});
// const detailData = computed(() => {
//   return cloneDeep(props.detailData);
// });

const getImg = async () => {
  const res: Blob = await getOperasLicense(id.value).then();
  imageURL.value = window.URL.createObjectURL(res); // 将Blob对象转换为URL
};

onMounted(() => {
  getImg();
});
</script>
<style scoped lang="scss"></style>
